<template>
	<uni-popup ref="gzStatus" type="bottom" :mask-click="false">
		<view class="popop">
			<swiper class="swiper" :current="current" style="height: 100%;" :disable-touch="true" @animationfinish="animationfinish">
				<swiper-item>
					<view class="header2">
						<view class=""></view>
						<u-icon name="close-circle" @click="backpop" size="48"></u-icon>
					</view>
					<view class="sectionto">可使用</view>
					<view class="cons" v-if="couponList != ''">
						<scroll-view class="section_Quan" scroll-y="true" lower-threshold="130" @scrolltolower="scrollLower">
							<view class="section_coupon" v-for="(item, index) in couponList" :key="index"  :style="{backgroundImage: 'url('+ urls +'/static/user/couponbj.png' +')' }">
								<view class="left" >
									<view class="left_top" v-if="item.price != ''">
										<text>￥</text>
										<text>{{ item.sub_price }}</text>
										<text></text>
									</view>
									<!-- <view class="left_bom"><text>{{item.text}}</text></view> -->
								</view>
								<view class="right">
									<view class="right_top">
										<text>{{item.min_price_desc}}</text>
									</view>
									<view class="right_bom">
										<text>{{ item.begin_time }}-{{ item.end_time }}</text>
									</view>
								</view>
								<image class="shere" v-if="coupon_id == item.user_coupon_id" :src="urls+ '/static/user/lchecks.png'" @click="choice(index, item)"></image>
								<image class="shere" v-else  :src="urls + '/static/index/pzselect1.png'"  @click="choice(index, item)"></image>
							</view>
						</scroll-view>
					</view>
					<u-empty text="暂无优惠券" mode="coupon" v-if="couponList == ''"></u-empty>
					<view class="foot" @click="wancheng" v-if="couponList">完成</view>
				</swiper-item>
			</swiper>
		</view>
	</uni-popup>
</template>

<script>
// import jisuan from '@/common/toCalculate.js';
// ////console.log(jisuan.add(0.1,0.65))
export default {
	props: {
		couponList: {
			type: Array,
			default() {
				return [];
			}
		},
		user_coupon_id: {
			// type: Number,
			default() {
				return [];
			}
		},
		youhuiNum: {
			type: Number,
			default() {
				return [];
			}
		},
	},
	data() {
		return {
			coupon_id:"",//选中优惠券id
			urls: this.$configs.urls,
			check: 1,
			current: 0,
			price: '',
			coupons: '',
			id: '',
			youhuinum: 0,
			zongdikou:"",
		};
	},
	created() {},
	watch: {
		couponList(val) {
			// this.user_coupon_id = val.user_coupon_id;
		},
		user_coupon_id(val){
			this.coupon_id = val;
		},
		youhuiNum(val){
			this.youhuinum = val;
		}
	},
	methods: {
		animationfinish(e) {
			if (e.detail.current == 1) {
				this.$emit('getCoupon');
			}
		},
		open() {
			this.$refs.gzStatus.open();
		},
		//选中优惠券
		choice(index, item) {
			this.coupon_id = item.user_coupon_id
			this.price = item.sub_price;
			this.youhuinum = item.sub_price;
		},
		getCarIds() { //获取要结算的商品
		    var that = this;
		    var couponList = that.couponList;
		    var haveSel = [];
		    for (let i = 0; i < couponList.length; i++) {
		       if (couponList[i].check == true) {
		           haveSel.push(couponList[i].id);
		       }
		    }
		    // let cartIds = haveSel.join(',');
		    return haveSel;
		},
		getPreicelist() { //获取要结算的商品
		    var that = this;
		    var couponList = that.couponList;
		    var pricelist = 0;
		    for (let i = 0; i < couponList.length; i++) {
		       if (couponList[i].check == true) {
		          pricelist+=Number(couponList[i].price);
		       }
		    }
		    return pricelist;
		},
		//切换支付方式
		checks(num) {
			this.check = num;
			// if(this.check == 1){
			// 	this.check = 2
			// } else {
			// 	this.check = 1
			// }
		},
		//关闭弹窗
		backpop() {
			this.$refs.gzStatus.close();
			this.zongdikou = ""
		},
		//使用优惠券
		detail() {
			this.current = 1;
			this.$emit('getCoupon');
		},
		wancheng() {
			this.$emit('goheji',{coupon_id:this.coupon_id,youhuinum:this.youhuinum})
			this.$refs.gzStatus.close();
		}
	}
};
</script>

<style lang="scss" scoped>
	.section_Quan {
		max-height: 420rpx;
		.section_coupon {
			width: 690rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-bottom: 10rpx;
			border: 1px solid #FFD453;
			border-radius: 10rpx;
			background-repeat: no-repeat !important;
			background-size: 100% 100% !important;
		.shere{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			position: absolute;
			right: 10rpx;
			top: 40rpx;
			z-index: 999;
		}
			.left {
				width: 180rpx;
				height: 130rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				
				.left_top {
					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #FFFFFF;
					}
					text:nth-child(2) {
						font-size: 42rpx;
					}
				}
				.left_bom {
					text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #707070;
					}
				}
			}
			.right {
				width: 468rpx;
				height: 130rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				position: relative;
				padding-left: 25rpx;
				box-sizing: border-box;
				.right_top {
					text:nth-child(1) {
						font-size: 40rpx;
						font-family: PingFang SC;
						color: #707070;
					}
					text:nth-child(2) {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #707070;
					}
				}
				.right_bom {
					margin-top: 10rpx;
					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #707070;
					}
				}
				.right_btn{
					width: 100rpx;
					height: 44rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #F59B45;
					text-align: center;
					line-height: 44rpx;
					position: absolute;
					right: 10rpx;
					bottom: 10rpx;
					z-index: 2;
				}
			}
		}
	}
.shere {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}
.block {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 90%;
	height: 200rpx;
	margin: 0 auto;
	margin-top: 20upx;
	display: flex;
	align-items: center;
	position: relative;
	.left {
		padding: 15rpx 0;
		width: 190rpx;
		.sub_price {
			color: #fff;
			font-size: 70rpx;
			text-align: center;
		}
		.txt {
			font-size: 26rpx;
			line-height: 37rpx;
			padding-top: 5rpx;
			color: #fff;
			text-align: center;
		}
		.txts {
			padding-top: 40upx;
		}
		.btns {
			width: 140rpx;
			height: 51rpx;
			line-height: 47rpx;
			background: #ffffff;
			border-radius: 28rpx;
			text-align: center;
			margin-right: 20upx;
			color: #ff6505;
			margin-left: 30upx;
			margin-top: 15upx;
		}
	}
	.right {
		flex: 1;
		padding-left: 60rpx;
		padding-bottom: 30rpx;
		.types {
			font-size: 24upx;
			width: 115upx;
			height: 35upx;
			border-radius: 35upx;
			line-height: 32upx;
			text-align: center;
			background: #ff6505;
			color: #ffffff;
			margin-right: 10upx;
		}
		.info {
			flex: 1;
		}
		.min_price_desc {
			font-size: 40rpx;
			line-height: 48rpx;
			color: #333;
			padding: 30upx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.name {
				width: 320upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.time {
			color: #666;
			font-size: 24rpx;
		}
		.times {
			margin: 15upx 0;
		}
		.imgs {
			image {
				width: 109upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
		.flexs2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 7upx;
			.flexs1 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999999;
				font-size: 24upx;
				.img {
					width: 28upx !important;
					height: 28upx !important;
					margin-left: 10upx;
				}
			}
			.btn {
				width: 140rpx;
				height: 51rpx;
				line-height: 47rpx;
				border: 1rpx solid #ff6505;
				border-radius: 28rpx;
				text-align: center;
				margin-right: 20upx;
				color: #ff6505;
			}
		}
	}
}
.popop {
	width: 100vw;
	height: 720rpx;
	background: #ffffff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	.sectionto {
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
	}
	.header2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-right: 20rpx;
		image {
			width: 14rpx;
			height: 28rpx;
		}
	}
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-right: 20rpx;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.section {
		font-size: 50rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.section1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		view:nth-of-type(1) {
			font-size: 32rpx;
			color: #666666;
		}
		view:nth-of-type(2) {
			font-size: 32rpx;
			color: #333333;
		}
	}

	.section2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		.left {
			font-size: 32rpx;
			color: #666666;
		}
		.right {
			text {
				font-size: 32rpx;
				color: #333333;
			}
			view{
				font-size: 32rpx;
				color: #707070;
			}
			image {
				width: 12rpx;
				height: 24rpx;
				padding-left: 10rpx;
			}
		}
	}
	.section3 {
		.title {
			font-size: 34rpx;
			color: #333333;
			padding-left: 20rpx;
		}
		.sec {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			padding-top: 20rpx;
			image {
				width: 44rpx;
				height: 44rpx;
			}
			text {
				padding-left: 30rpx;
				font-size: 32rpx;
				color: #666666;
			}
		}
	}
	.foot {
		width: 650rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		background: linear-gradient(180deg, #FCC485 0%, #FF760D 100%);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 40rpx;
	}
}
.cons {
	height: 450upx;
	overflow-y: scroll;
}
</style>
